<template>
  <div class="Register">
    <div class="content">
      <el-form
              ref="form"
              :model="userModel"
              :rules="rules"
              label-width="0"
              @submit.native.prevent
      >
        <el-form-item prop="username">
          <div class="row">
            <el-input
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    v-model="userModel.username"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="row">
            <el-input
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    type="password"
                    v-model="userModel.password"
            />
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="row">
            <el-input
                    placeholder="请再次输入密码"
                    prefix-icon="el-icon-view"
                    type="password"
                    v-model="userModel.confirmPassword"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <div class="row">
            <div>
              <el-button class="button" type="primary" @click="wantRegister">注册</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as verifyUser from "@/utils/verify/verifyUser";
import { registerAPI } from "@/api/identify/identify";
import UserVO from "@/vos/UserVO";
export default {
  name: "Register",
  data() {
    return {
      userModel: {
        id: "",
        username: "",
        password: "",
        confirmPassword: ""
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 4, max: 30, message: "长度在 4 到 30 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    wantRegister() {
      //用户填入信息校验
      if (this.loading) {
        this.$message.warning("上一次操作尚未完成，请稍后再试");
        return;
      }
      let verify = verifyUser.verifyUsername(this.userModel.username);
      if (verify !== verifyUser.usernameState.pass) {
        if (
          verify === verifyUser.usernameState.tooShort ||
          verify === verifyUser.usernameState.tooLong
        )
          this.$message.warning("用户名长度必须在在 4 到 30 个字符之间");
        else if (verify === verifyUser.usernameState.illegalChar)
          this.$message.warning("用户名只能由汉字、字母、数字和下划线组成");
        else this.$message.error("未知错误，请刷新重试");
        return;
      }
      if (this.userModel.password !== this.userModel.confirmPassword) {
        this.$message.warning("两次输入密码不一致");
        return;
      }
      verify = verifyUser.verifyPassword(this.userModel.password);
      if (verify !== verifyUser.passwordState.pass) {
        if (
          verify === verifyUser.passwordState.tooShort ||
          verify === verifyUser.passwordState.tooLong
        )
          this.$message.warning("密码长度必须在 6 到 30 个字符之间");
        else if (verify === verifyUser.passwordState.illegalChar)
          this.$message.warning("密码只能由字母、数字、下划线组成");
        else this.$message.error("未知错误，请刷新重试");
        return;
      }
      this.register();
    },
    register() {
      this.loading = true;
      let loadingMessage = this.$message.loading();

      let userVO = new UserVO(
        -1,
        this.userModel.username,
        this.userModel.password
      );
      registerAPI(
        userVO,
        () => {
          this.$message.success("注册成功");
          this.$emit("registerSuccess", userVO);
        },
        errorMessage => {
          this.$message.error("注册失败: " + errorMessage);
        },
        () => {
          this.loading = false;
          loadingMessage.close();
        }
      );
    }
  }
};
</script>

<style scoped>
.Register .row .button {
  float: right;
}
</style>
